<template>
	<view class="content pb-30">
		<map class="map" :latitude="latitude" :longitude="longitude"></map>
		<view class="input">
			<text>联系人</text>
			<input type="text" value="" placeholder="请输入联系人姓名" v-model="username" />
		</view>
		<view class="input">
			<text>性别</text>
			<view class="sex" v-for="item in sexList" :key="item.id">
				<view class="item" :class="{cur:sex==item.id}"
				@click="sex=item.id">{{item.name}}</view>
			</view>
		</view>
		<view class="input">
			<text>手机号码</text>
			<input type="text" value="" placeholder="请输入手机号码" v-model="usermobile" />
		</view>
		<view class="input">
			<text>定位信息</text>
			<view class="text-1" @click="openMap">{{locationAddress}}</view>
			<view class="icon">
				<u-icon name="map"></u-icon>
			</view>
		</view>
		<view class="input">
			<text>详细地址</text>
			<input type="text" value="" placeholder="例:xx号xx楼xx门牌" v-model="street" />
		</view>
		<view class="input1">
			<text>设为默认地址</text>
			<switch :checked="status == 1" style="transform: scale(.7);" @change="switch1Change" />
		</view>
		<view v-if="addressid" class="btn" @click="edit">确认修改</view>
		<view v-else class="btn" @click="submit">保存地址</view>
	</view>
</template>

<script>
	var QQMapWX = require('../../common/qqmap-wx-jssdk.min.js')
	var qqmapsdk;
	export default {
		data() {
			return {
				latitude: '',
				longitude: '',
				locationAddress: '',

				region: '',
				txt: '选择省市区',
				customItem: '',
				
				sexList:[
					{
						id:1,
						name:'先生'
					},
					{
						id:2,
						name:'女士'
					}
				],
				sex:1,
				
				username: '',
				usermobile: '',
				street: '',
				status: 1,
				
				addressid:'',
				source:''
			};
		},
		onLoad(e) {
			this.baseUrl = this.$tools.baseUrl
			// 实例化API核心类
			qqmapsdk = new QQMapWX({
				key: '3SHBZ-L37KD-YBY4H-PJHZY-KW5BF-NLB3U'
			});
			if(e.source){
				this.source = e.source
			}
			if(e.id){
				this.getAddress(e.id)
				uni.setNavigationBarTitle({
					title:'编辑地址'
				})
			}else{
				this.getLocation()
			}
		},
		methods: {
			getLocation() {
				uni.getLocation({
					type: 'gcj02',
					success: (res) => {
						const latitude = res.latitude;
						const longitude = res.longitude;
						this.latitude = latitude
						this.longitude = longitude
						console.log(res)
						qqmapsdk.reverseGeocoder({
							location: {
								latitude,
								longitude
							},
							success: (res) => {
								console.log(res)
								this.locationAddress = res.result.address
							},
							fail: err => {
								console.log(err)
							}
						});
					}
				});
			},
			// 获取修改地址信息
			getAddress(id){
				this.$api.getAddress({
					openid:uni.getStorageSync('openid'),
					id
				}).then(res=>{
					this.addressid = res.data.id
					this.username = res.data.name
					this.usermobile = res.data.mobile
					this.sex = res.data.sex
					this.locationAddress = res.data.address
					this.street = res.data.addressdesc
					this.latitude = Number(res.data.latitude)
					this.longitude = Number(res.data.longitude)
					this.status = res.data.status
				})
			},
			// 选择定位
			openMap(){
				uni.chooseLocation({
					success: (res) => {
						console.log(res)
						this.latitude = res.latitude
						this.longitude = res.longitude
						this.locationAddress = res.address + res.name
					}
				})
			}, 
			change(data) {
				this.txt = data.data.join('');
				console.log(data.data.join(''));
			},
			//是否设为默认地址
			switch1Change(e) {
				var that = this;
				if (e.detail.value) {
					that.status = 1;
				} else {
					that.status = 0;
				}
				console.log(e.detail.value, this.status);
			},
			submit() {
				if (this.username && this.usermobile && this.street) {
					this.$api.addAddress({
						openid: uni.getStorageSync('openid'),
						name: this.username,
						phone: this.usermobile,
						sex: this.sex,
						address: this.locationAddress,
						addressdesc: this.street, 
						latitude: this.latitude, 
						longitude: this.longitude, 
						status: this.status, 
					}).then(res=>{
						this.$tools.toast(res.msg)
						if(res.code==1){
							if(this.source=='placeOrder'){
								uni.navigateBack({
									delta:1
								})
							}else{
								uni.redirectTo({
									url:'../address/address'
								})
							}
							
						}
					})
				} else {
					uni.showToast({
						title: '请填写地址信息',
						icon: 'none'
					});
				}
			},
			// 修改地址
			edit() {
				if (this.username && this.usermobile && this.street) {
					this.$api.siteAddres({
						openid: uni.getStorageSync('openid'),
						name: this.username,
						phone: this.usermobile,
						sex: this.sex,
						address: this.locationAddress,
						addressdesc: this.street, 
						latitude: this.latitude, 
						longitude: this.longitude, 
						status: this.status, 
						addressid:this.addressid
					}).then(res=>{
						this.$tools.toast(res.msg)
						if(res.code==1){
							uni.redirectTo({
								url:'../address/address'
							})
						}
					})
				} else {
					uni.showToast({
						title: '请填写地址信息',
						icon: 'none'
					});
				}
			}
		}
	};
</script>

<style lang="scss">
	page {
		background-color: #fff;
	}

	.map {
		width: 100%;
		height: 588upx;
	}

	.address {
		border-radius: 16upx;
		margin-top: -16upx;
		padding: 32upx 0;

		.icon {
			width: 32upx;
			height: 32upx;
		}
	}

	.content {
		width: 100%;
		margin-top: 20upx;

		.addAddress {
			width: 80%;
			margin-left: 10%;
			// margin-left: 10%;
			height: 80upx;
			background-color: #eabd66;
			border-radius: 40upx;
			font-size: 32upx;
			color: #ffffff;
			line-height: 80upx;
			text-align: center;
		}
		
		.icon {
			position: absolute;
			right: 20upx;
			top: 50%;
			transform: translateY(-50%);
			width: 30upx;
		}

		.input {
			margin: 0 20upx;
			padding: 0 20upx;
			line-height: 100upx;
			display: flex;
			align-items: center;
			font-size: 30upx;
			color: #999999;
			border-bottom: 2upx solid #ededed;
			background: #fff;
			position: relative;
			.sex{
				display: flex;
				margin: 20upx 0;
				.item{
					font-size: 32upx;
					color: #C4C4C4;
					width: 128upx;
					line-height: 72upx;
					text-align: center;
					background: #FFFFFF;
					border-radius: 12upx;
					border: 1upx solid #C4C4C4;
					margin-right: 32upx;
				}
				.cur{
					color: #3BB061;
					border: 1upx solid #3BB061;
				}
			}
			text {
				font-size: 30upx;
				width: 170upx;
				min-width: 170upx;
				color: #222;
			}
			
			.text-1{
				padding-right: 50upx;
				line-height: 1.6;
				margin: 10upx 0;
			}

			input {
				font-size: 28upx;
				color: #999999;
			}
		}

		.input1 {
			width: 90%;
			height: 100upx;
			margin-left: 5%;
			display: flex;
			align-items: center;
			font-size: 30upx;
			color: #999999;
			border-bottom: 2upx solid #ededed;

			text {
				font-size: 30upx;
			}

			input {
				font-size: 28upx;
				color: #999999;
			}
		}
	}
	.btn{
		margin: 0 auto; 
	}
</style>
